<template>
  <div class="book">
    <div v-show="active == 0" class="book_shelf">
      <van-pull-refresh
        v-model="isLoading"
        @refresh="GetBookShelfList"
        success-text="刷新成功"
        :head-height="50"
      >
      <van-skeleton title avatar :row="3" :loading="isLoading">
        <ul class="book_list" v-if="bookShelfList.length>0">          
          <li @click="toReadBook(book.bId)" v-for="book in bookShelfList" :key="book.bId">
            <van-swipe-cell>
            <img :src="book.coverImg" alt="封面" />
            <div class="book_info">
              <p
                class="row"
                style="font-size: 18px; font-weight: 600; margin-top: 20px"
              >
                {{book.bName}}
              </p>
              <p class="row" style="font-size: 14px">最新：{{ book.newChapter }}</p>
              <p class="row" style="font-size: 14px">
                <van-icon name="underway-o" /> {{book.updateTime}}
              </p>
            </div>
            <template #right>
              <van-button square type="danger" text="删除" @click="delBook(book.bId)" />
            </template>
            </van-swipe-cell>
          </li>
        </ul>
        <van-empty v-else description="快去书城添加你喜欢的书籍吧" />
      </van-skeleton>
      </van-pull-refresh>
    </div>
    <div v-show="active == 1" class="book_city book_shelf">
      <van-search
        v-model="search"
        shape="round"
        background="#4fc08d"
        placeholder="可搜书名和作者，请您少字也别输错字。"
        @search="onSearch"
        @clear="onSearch"
      />
      <van-pull-refresh
        v-model="isLoading"
        @refresh="onSearch"
        success-text="刷新成功"
        :head-height="50"
      >
        <ul class="book_list" style="height: calc(100% - 110px) !important;">
          <li v-for="(book,i) in bookList" :key="i">
            <img :src="book.coverImg" alt="封面" />
            <div class="book_info">
              <p
                class="row"
                style="font-size: 18px; font-weight: 600;"
              >
                {{book.bName}}
              </p>
              <p class="row" style="font-size: 14px">最新：{{ book.newChapter }}</p>
              <p class="row" style="font-size: 14px">
                <van-icon name="underway-o" /> {{book.updateTime}}
              </p>
              <p class="row">
                <van-button :disabled="bookShelf.indexOf(book.bId+'')<0?false:true" v-if="book.bId>0" type="primary" size="mini" @click="addBookShelf(book.bId)">加入书架</van-button>
                <van-button v-else type="primary" size="mini" :disabled="downloadLoad" @click="getCatalogue(book.url)">收录书籍</van-button>
              </p>
            </div>
          </li>
          
        </ul>
      </van-pull-refresh>
    </div>
    <div v-show="active == 2" class="classification">分类</div>
    <div v-show="active == 3" class="my">
      <van-cell is-link center>
        <template #title>
          <van-image
            round
            width="70px"
            height="70px"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
          <span class="custom-title">点击登录</span>
        </template>
      </van-cell>
      <van-cell is-link class="van_cell" title="消息通知" icon="shop-o">
      </van-cell>
      <van-cell is-link class="van_cell " title="最近浏览" icon="shop-o">
      </van-cell>
      <van-cell is-link class="van_cell" title="分享应用" icon="shop-o">
      </van-cell>
      <van-cell is-link class="van_cell" title="缓存管理" icon="shop-o">
      </van-cell>
      <van-cell is-link class="van_cell" title="设置" icon="shop-o">
      </van-cell>
    </div>
    <van-tabbar v-model="active" @change="tabbarChange">
      <van-tabbar-item icon="home-o">书架</van-tabbar-item>
      <van-tabbar-item icon="search">书城</van-tabbar-item>
      <van-tabbar-item icon="friends-o">分类</van-tabbar-item>
      <van-tabbar-item icon="setting-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { Toast } from "vant";
import {getBookList,getSearch,getBookShelfList,getCatalogue} from "@/api/index.js"
export default {
  name: "book",
  data() {
    return {
      active: 0,
      isLoading: false,
      params:{
        page:1,
        key:'',
        intPageSize:1000
      },
      bookList:[],
      search:'',
      bookShelfList:[],
      bookShelf:[],
      downloadLoad:false,
    };
  },
  mounted(){
    this.GetBookShelfList();
  },
  methods: {
    // onRefresh() {
    //   this.isLoading = true;
    //   setTimeout(() => {
    //     // Toast("刷新成功");
    //     this.isLoading = false;
        
    //   }, 1000);
    // },
    GetBookShelfList(){
      var bIds=window.localStorage.getItem("bookShelf");
      if(bIds==null||bIds==undefined||bIds==''){
        this.bookShelfList=[]
        this.bookShelf=[]
        window.localStorage.setItem("bookShelf",this.bookShelf)
      }else{
        this.bookShelf=bIds.split(',');
        this.isLoading = false;
        getBookShelfList({
          bIds:bIds
        }).then((data) => {
          this.isLoading = false;
          if (data.success) {
            this.bookShelfList = data.response;
          }
        });
      }
    },
    addBookShelf(bId){
      var bIds=window.localStorage.getItem("bookShelf");
      if(bIds==null||bIds==undefined||bIds==''){
        this.bookShelf=[]
      }else{
        this.bookShelf=bIds.split(',');
      }
      if(this.bookShelf.indexOf(bId)<0){
        this.bookShelf.push(bId+'');
        window.localStorage.setItem("bookShelf",this.bookShelf)
        this.onSearch();
      }
    },
    delBook(bId){
      var bIds=window.localStorage.getItem("bookShelf");
      if(bIds==null||bIds==undefined||bIds==''){
        this.bookShelf=[]
      }else{
        this.bookShelf=bIds.split(',');
      }
      var arr=[];
      console.log('this.bookShelf:',this.bookShelf)
      this.bookShelf.forEach(i => {
        if(i!=bId){
          arr.push(i);
        }
      });
      console.log('bId:',bId);
      console.log('arr:',arr);
      this.bookShelf=arr;
      window.localStorage.setItem("bookShelf",this.bookShelf)
      this.GetBookShelfList();
    },
    toReadBook(bId){ 
      var cId = window.localStorage.getItem("cId"+bId);
      this.$router.push({path:'/ReadBook',query:{bId:bId,cId:cId}});
    },
    GetBookList(){
      this.isLoading = true;
      getBookList(this.params).then((data) => {
        this.isLoading = false;
        if (data.success) {
          this.bookList = data.response.data;
        }
      });
    },
    GetSearch(){
      this.isLoading = true;
      getSearch({
        searchkey:this.search
      }).then((data) => {
        this.isLoading = false;
        if (data.success) {
          this.bookList = data.response;
        }
      });
    },
    onSearch(){
      if(this.search==''){
        this.GetBookList();
      }else{
        this.GetSearch();
      }
    },
    tabbarChange(){
      if(this.active==0){
        this.GetBookShelfList();
      }
      if(this.active==1){
        this.onSearch();
      }
    },
    getCatalogue(url){
      this.downloadLoad=true
      getCatalogue({
        url:url
      }).then((data) => {
        this.downloadLoad=false;
        this.onSearch();
      });
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.book {
  margin: 0;
  padding: 0;
  .book_shelf {
    height: 100%;
    width: 100%;
    /deep/ .van-pull-refresh {
      height: calc(100vh - 80px) !important;
      overflow: auto !important; 
      // background-color: red !important;
    }
    .book_list {
      list-style: none;
      padding: 0;
      overflow: overlay;
      height: calc(100% - 50px);
      width: 100%;
      position: fixed;
      li {
        position: relative;
        overflow: hidden;
        border-bottom: 1px solid #eee;
        padding: 6px 0px;
        img {
          height: 120px;
          width: 120px;
          float: left;
          margin-left: 20px;
        }
        .book_info {
          height: 120px;
          width: calc(100% - 160px);
          vertical-align: middle;
          float: left;
          padding-left: 10px;
          padding-right: 10px;
          p {
            margin: 8px 0px;
            text-align: left;
          }
          .row {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
          }
          .rows {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }
      }
      li:active{
        background: #eee;
      }
    }
  }
  .my{
    height: calc(100vh - 50px) !important;
    width: 100%;
    background: #eee;
    .van_cell{
      margin: 10px 0px;
    }
    .custom-title{
      line-height: 70px;
      font-size: 18px;
      font-weight: 540;
      position: fixed;
      margin-left: 10px;
    }
  }
}
</style>
